<template>
  <view class="login-container">
    <view class="login-form">
      <view class="form-title">用户登录</view>
      
      <view class="form-item">
        <text class="label">用户名</text>
        <input 
          v-model="form.username" 
          placeholder="请输入用户名" 
          class="input"
          maxlength="20"
        />
      </view>
      
      <view class="form-item">
        <text class="label">密码</text>
        <input 
          v-model="form.password" 
          placeholder="请输入密码" 
          type="password"
          class="input"
          maxlength="20"
        />
      </view>
      
      <button 
        class="login-btn" 
        :disabled="isLoggingIn"
        @click="handleLogin"
      >
        {{ isLoggingIn ? '登录中...' : '立即登录' }}
      </button>
      
      <view class="register-link">
        <text class="register-text">没有账号？</text>
        <text class="register-action" @click="goToRegister">立即注册</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoggingIn: false,
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleLogin() {
      // 表单验证
      if (!this.form.username || !this.form.password) {
        uni.showToast({
          title: '用户名和密码不能为空',
          icon: 'none'
        })
        return
      }
      
      this.isLoggingIn = true
      
      try {
        console.log('开始登录请求，用户名:', this.form.username)
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: 'http://localhost:3000/api/user/login',
            method: 'POST',
            data: this.form,
            success: resolve,
            fail: reject
          })
        })
        
        console.log('登录响应:', JSON.stringify(res))
        
        if (res.data.code === 200) {
          console.log('登录成功，准备跳转')
          
          // 存储token和用户信息
          uni.setStorageSync('token', res.data.data.token)
          uni.setStorageSync('userInfo', JSON.stringify(res.data.data.userInfo))
          
          console.log('用户信息已存储:', res.data.data.userInfo)
          
          // 显示成功提示
          uni.showToast({
            title: '登录成功',
            icon: 'success',
            duration: 1500
          })
          
          // 延迟跳转，确保Toast显示完成
          setTimeout(() => {
            console.log('开始跳转到我的页面')
            
            // 先关闭当前页面，然后跳转
            uni.navigateBack({
              success: () => {
                console.log('关闭登录页面成功')
                // 延迟一点再跳转
                setTimeout(() => {
                  uni.switchTab({
                    url: '/pages/mine/mine',
                    success: () => {
                      console.log('跳转到我的页面成功')
                    },
                    fail: (err) => {
                      console.error('跳转到我的页面失败:', err)
                    }
                  })
                }, 100)
              },
              fail: () => {
                console.log('关闭登录页面失败，直接跳转')
                uni.switchTab({
                  url: '/pages/mine/mine',
                  success: () => {
                    console.log('直接跳转到我的页面成功')
                  },
                  fail: (err) => {
                    console.error('直接跳转到我的页面失败:', err)
                  }
                })
              }
            })
          }, 1500)
        } else {
          console.log('登录失败，错误码:', res.data.code, '错误信息:', res.data.message)
          uni.showToast({
            title: res.data.message || '登录失败',
            icon: 'none'
          })
        }
      } catch (err) {
        console.error('登录失败:', err)
        uni.showToast({
          title: '登录失败，请稍后重试',
          icon: 'none'
        })
      } finally {
        this.isLoggingIn = false
      }
    },
    
    goToRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      })
    }
  }
}
</script>
<style>
.login-container {
  padding: 40rpx;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.login-form {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
}

.form-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.login-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #7bbcb2;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  margin-top: 40rpx;
}

.login-btn[disabled] {
  opacity: 0.6;
}

.register-link {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  margin-top: 30rpx;
}

.register-text {
  color: #666;
}

.register-action {
  color: #7bbcb2;
  margin-left: 10rpx;
}
</style>

